<template>
  <el-select v-model="data" :value-key="valueKey" v-bind="$attrs" v-on="$listeners">
    <el-option v-if="hasAll" value="" label="全部"></el-option>
    <el-option
      v-for="item in options"
      :key="item[valueKey]"
      :disabled="item.disabled"
      :label="item | label(labelKey, customizeKey, separator)"
      :value="returnObject ? item : item[valueKey]">
      <!-- <span v-if="!customizeKey.length">{{ item[labelKey] }}</span>
      <template v-else>
        <span v-for="(customize, index) in customizeKey" :key="customize">
          <template v-if="index > 0">{{ separator }}</template>
          {{ item[customize] }}
        </span>
      </template> -->
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'Select',
    props: {
      options: {
        type: Array,
        default: () => []
      },
      hasAll: {
        type: Boolean,
        default: () => false
      },
      value: {
        type: [String, Number, Array, Object],
        default: () => ''
      },
      labelKey: {
        type: String,
        default: () => 'label'
      },
      valueKey: {
        type: String,
        default: () => 'value'
      },
      customizeKey: {
        type: Array,
        default: () => []
      },
      separator: {
        type: String,
        default: () => '-'
      },
      returnObject: {
        type: Boolean,
        default: () => false
      }
    },
    data () {
      return {
        data: ''
      }
    },
    watch: {
      data: {
        handler (newV) {
          this.$emit('input', newV)
        }
      },
      value: {
        immediate: true,
        handler (newV) {
          this.data = newV
        }
      }
    },
    filters: {
      label (item, labelKey, customizeKey, separator) {
        let text = ''
        let arr = []
        if (customizeKey && customizeKey.length) {
          customizeKey.map((i) => {
            arr.push(item[i])
            text = arr.join(separator)
          })
        } else {
          text = item[labelKey]
        }
        return text
      }
    }
  }
</script>

<style scoped>
</style>
